import clsx from 'clsx'
import { Arrow, Icon } from '@taroify/icons'
import { Grid, Image } from '@taroify/core'
import Taro, { useLoad } from '@tarojs/taro'
import { Button, Text, View } from '@tarojs/components'

import styles from './index.module.scss'
import { formatMobile } from '@/utils/format'
import { useNavigate } from '@/hooks/useNavigate'
import { useBindPhone } from '@/hooks/useBindPhone'
import { useUserStore } from '@/hooks/useUserStore'
import { useAuthHandler } from '@/hooks/useAuthHandler'

export default function Index() {
  const [, bindPhone] = useBindPhone()
  const { userInfo, isAuthed } = useUserStore()
  const { execute: navigateTo } = useAuthHandler(useNavigate())

  useLoad(() => {
    console.log('Page loaded.')
  })

  const handleContact = () => {
    Taro.openCustomerServiceChat({
      corpId: '1234567890',
      extInfo: {
        url: '/pages/my/index',
      },
      success: () => {
        console.log('客服聊天成功')
      },
      fail: (err) => {
        Taro.showToast({
          icon: 'error',
          title: err.errMsg,
        })
      },
    })
  }

  return (
    <View className="page">
      <View className="page-content gap-4">
        <View className={clsx(styles.banner, 'pb-6 flex flex-col justify-end')}>
          <View className="p-4 flex items-center gap-4">
            <View className="shrink-0">
              {!!userInfo?.avatar ? (
                <Image src={userInfo.avatar} round mode="aspectFill" width="48px" height="48px" />
              ) : (
                <View className="size-12 p-2 flex flex-center text-grey bg-grey rounded-full">
                  <Icon classPrefix="icon" name="wode" size="32" />
                </View>
              )}
            </View>
            {isAuthed ? (
              <View className="flex-1 flex flex-col min-w-0 text-white">
                <Text className="font-semibold">{userInfo?.name || '未登录'}</Text>
                <Text className="font-xs">{userInfo?.phone ? formatMobile(userInfo.phone) : '未绑定手机号'}</Text>
              </View>
            ) : (
              <Button
                className="p-1 flex-1 text-start text-white bg-transparent"
                open-type="getPhoneNumber"
                onGetPhoneNumber={bindPhone}
              >
                <Text>立即登录</Text>
              </Button>
            )}
            <View
              className="p-1 text-white rounded-full"
              hover-class="bg-hover"
              onClick={() => navigateTo('/pages/my/settings')}
            >
              <Icon classPrefix="icon" name="shezhi" size="24" />
            </View>
          </View>
          <View className="h-px" />
        </View>

        <View className="mx-4 -mt-10 px-3 py-2 flex gap-3 bg-default rounded-lg shadow-lg">
          <View className="p-2 flex-1 flex flex-col flex-center gap-2 rounded-md">
            <View>
              <Text className="text-xl font-semibold">0.00</Text>
            </View>
            <Text className="">余额</Text>
          </View>
          <View className="w-px my-auto bg-border" style="height: 60px; transform: scaleX(0.5)" />
          <View
            className="p-2 flex-1 flex flex-col flex-center gap-2 rounded-md"
            hover-class="bg-hover"
            onClick={() => navigateTo('/pages/my/coupon')}
          >
            <View>
              <Text className="text-xl font-semibold">0</Text>
              <Text className="ms-1 text-xs">张</Text>
            </View>
            <Text className="">优惠券</Text>
          </View>
          <View className="w-px my-auto bg-border" style="height: 60px; transform: scaleX(0.5)" />
          <View
            className="p-2 flex-1 flex flex-col flex-center gap-1 rounded-md"
            hover-class="bg-hover"
            onClick={() => navigateTo('/pages/my/wallet')}
          >
            <Icon classPrefix="icon" name="zhifu" color="var(--color-primary)" size="32" />
            <Text className="text-sm">我的钱包</Text>
          </View>
        </View>

        <View className="mx-4 p-2 bg-default rounded-lg shadow-lg">
          <View className="mb-2 flex items-center justify-between gap-4">
            <View className="px-2">
              <Text className="font-semibold">我的订单</Text>
            </View>
            <View
              className="p-2 flex items-center gap-1 text-xs text-grey rounded-sm"
              hover-class="bg-hover"
              onClick={() => navigateTo('/pages/order/index', 'switchTab')}
            >
              <Text className="text-xs">全部订单</Text>
              <Arrow size="12px" />
            </View>
          </View>
          <Grid className={styles.grid} clickable square columns={5} bordered={false} icon-size="32px">
            <Grid.Item
              className="rounded-md"
              text="待接单"
              icon={<Icon classPrefix="icon" name="daijiedan1" color="var(--color-primary)" />}
              onClick={() => navigateTo('/pages/order/index?status=0', 'switchTab')}
            />
            <Grid.Item
              className="rounded-md"
              text="待服务"
              icon={<Icon classPrefix="icon" name="shangmen" color="var(--color-primary)" />}
              onClick={() => navigateTo('/pages/order/index?status=0', 'switchTab')}
            />
            <Grid.Item
              className="rounded-md"
              text="服务中"
              icon={<Icon classPrefix="icon" name="fuwuzhong" color="var(--color-primary)" />}
              onClick={() => navigateTo('/pages/order/index?status=1', 'switchTab')}
            />
            <Grid.Item
              className="rounded-md"
              text="已完成"
              icon={<Icon classPrefix="icon" name="yiwancheng" color="var(--color-primary)" />}
              onClick={() => navigateTo('/pages/order/index?status=2', 'switchTab')}
            />
            <Grid.Item
              className="rounded-md"
              text="已取消"
              icon={<Icon classPrefix="icon" name="yiquxiao" color="var(--color-primary)" />}
              onClick={() => navigateTo('/pages/order/index?status=3', 'switchTab')}
            />
          </Grid>
        </View>

        <View className="mx-4 p-2 bg-default rounded-lg shadow-lg">
          <View className="p-2 flex items-center justify-between gap-4">
            <Text className="font-semibold">我的服务</Text>
          </View>
          <Grid className={styles.grid} clickable square columns={4} bordered={false} icon-size="32px">
            <Grid.Item
              className="rounded-md"
              text="邀请好友"
              icon={<Icon classPrefix="icon" name="gift" color="var(--color-primary)" />}
              onClick={() => navigateTo('/pages/invite/index')}
            />
            <Grid.Item
              className="rounded-md"
              text="领券中心"
              icon={<Icon classPrefix="icon" name="youhuiquan" color="var(--color-primary)" />}
              onClick={() => navigateTo('/pages/coupon/index')}
            />
            <Grid.Item
              className="rounded-md"
              text="联系客服"
              icon={<Icon classPrefix="icon" name="kefu" color="var(--color-primary)" />}
              onClick={handleContact}
            />
            <Grid.Item
              className="rounded-md"
              text="技师入驻"
              icon={<Icon classPrefix="icon" name="ruzhu1" color="var(--color-primary)" />}
              onClick={() => navigateTo('/pages/member/index')}
            />
            <Grid.Item
              className="rounded-md"
              text="关于我们"
              icon={<Icon classPrefix="icon" name="moban" color="var(--color-primary)" />}
              onClick={() => navigateTo('/pages/about/index')}
            />
            <Grid.Item
              className="rounded-md"
              text="我的投诉"
              icon={<Icon classPrefix="icon" name="beizhu" color="var(--color-primary)" />}
              onClick={() => navigateTo('/pages/my/complaint')}
            />
            <Grid.Item
              className="rounded-md"
              text="添加车辆"
              icon={<Icon classPrefix="icon" name="qiche1" color="var(--color-primary)" />}
              onClick={() => navigateTo('/pages/car/list')}
            />
            <Grid.Item
              className="rounded-md"
              text="地址管理"
              icon={<Icon classPrefix="icon" name="dizhiguanli" color="var(--color-primary)" />}
              onClick={() => navigateTo('/pages/address/list')}
            />
          </Grid>
        </View>
      </View>
    </View>
  )
}
